import {createStyles, Theme, withStyles} from "@material-ui/core/styles";
import {WithStyles} from "@material-ui/core/styles/withStyles";
import {Avatar,Icon ,Menu} from "antd";
import Col from "antd/es/grid/col";
import Row from "antd/es/grid/row";
import * as React from "react";
import {Redirect, RouteComponentProps, Switch} from "react-router";
import {Link} from "react-router-dom";
import userBg from "../../images/bg.png";
import AuthRoute from "../../component/AuthRoute";
import { connect } from "react-redux";
import { userData } from "../../type/UserInfoData";
import {AccountSetting,} from "../../router/RouterComponent";
import Certification from "./Certification";
import InfoCenter from "./InfoCenter";

const styles = (theme: Theme) => {
    return createStyles({
        root: {
            paddingTop:10
        },
        userCard: {
            display: "flex",
            backgroundImage: `url(${userBg})`,
            borderRadius: "5px",
            backgroundSize: "cover",
            flexDirection: "column",
            justifyContent: "center",
            alignItems: "center ",
            padding: "10px",
            color: "rgb(255,255,255)"
        },
        menubg: {
            borderRadius: "5px",
            marginTop: "10px",
            height: "54vh",
            backgroundColor: "rgb(255,255,255)",
            boxShadow: "0 2px 8px rgba(0, 0, 0, 0.09)",
            borderColor: "rgba(0, 0, 0, 0.09)",
            overflow:"hidden",
            "& li:after": {
                border: "0px"
            },
            "& .ant-menu .ant-menu-item": {
                margin: 0
            },
            "& .ant-menu .ant-menu-item-selected": {
                backgroundColor: "#3987cf",
            },
            "& .ant-menu-inline .ant-menu-item:after": {
                borderRight: "3px solid #3987cf"
            },
            "& .ant-menu-item > a:hover": {
                color: "#3987cf"
            },
            "& .ant-menu-item-selected > a, .ant-menu-item-selected > a:hover": {
                color: "#ffffff"
            }
        },
        centerRight: {
            borderRadius: "5px",
            minHeight: "76vh",
            backgroundColor: "rgb(255,255,255)",
            boxShadow: "0 2px 8px rgba(0, 0, 0, 0.09)",
            borderColor: "rgba(0, 0, 0, 0.09)",
            marginLeft: "10px",
            marginBottom:"20px",
            padding: "20px"
        }
    });
};

interface Iprops extends WithStyles<typeof styles>, RouteComponentProps<any> {
    user: userData;
}

/**
 * 个人中心主页面
 * @property route 路由配置
 */
interface Istates {
    current:string
}
class UserInfo extends React.Component<Iprops,Istates> {

    constructor(prop:Iprops){
        super(prop);
        this.state={
            current:"account-setting"
        }
    }
    public componentWillMount(){
        const url = this.props.location.pathname;
        const list = url.split('/')
            .filter(i => i);// 去掉分割后的数组里面的空元素
        this.setState({
            current:list[1]
        })
    }
    public render() {
        const {classes} = this.props;
        return (
            <Row type={"flex"} justify={"center"}>
                <Col span={20} className={classes.root}>
                    <Col span={5}>
                        <div className={classes.userCard}>
                            <Avatar src={this.props.user.avatarUrl} size={80} />
                            <p>{this.props.user.accountName}</p>
                            <p>{this.props.user.phone}</p>
                        </div>
                        <div className={classes.menubg}>
                            <Menu style={{width: "100%"}} mode="inline" defaultSelectedKeys={[this.state.current]}>
                                <Menu.Item key="account-setting">
                                    <Link to={"/user-info/account-setting"}>
                                        <Icon type="setting"/>
                                        <span>账户设置</span>
                                    </Link>
                                </Menu.Item>
                                <Menu.Item key="certification">
                                    <Link to={"/user-info/certification"}>
                                        <Icon type="safety"/>
                                        <span>实名认证</span>
                                    </Link>
                                </Menu.Item>
                            </Menu>
                        </div>
                    </Col>
                    <Col span={19}>
                        <div className={classes.centerRight}>
                            <Switch>
                                <Redirect to={"/user-info/account-setting"} path={"/user-info"} exact={true} />
                                <AuthRoute
                                    exact={true}
                                    path={"/user-info/account-setting"}
                                    component={AccountSetting}
                                />
                                <AuthRoute
                                    path={"/user-info/certification"}

                                    component={Certification}
                                />
                                <AuthRoute
                                    path={"/user-info/info-center/:id"}
                                    component={InfoCenter}

                                />
                            </Switch>
                        </div>
                    </Col>
                </Col>
            </Row>

        );
    }
}
const mapStateToProps = (state: any) => {
    return {
        user: state
            .get("loginOrLogoutReducer")
            .get("user")
            .toJS()
    };
};
export default connect(mapStateToProps)(withStyles(styles)(UserInfo));
